<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @click="handlerCheck(todo.id)"
      />
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
      <span v-show="todo.isEdit">
        <input ref="inputTitle" type="text" :value="todo.title" @blur="saveTodo(todo, $event)" />
      </span>
    </label>
    <button class="btn btn-danger" @click="handlerDel(todo.id)">删除</button>
    <button v-show="!todo.isEdit" class="btn btn-edit" @click="handlerEdit(todo)">编辑</button>
  </li>
</template>

<script>
import publish from "pubsub-js";
export default {
  name: "TodoItem",
  props: ["todo"],
  methods: {
    handlerCheck(id) {
      this.$bus.$emit("changeTodo", id);
    },
    handlerDel(id) {
      if (confirm("确认删除吗？")) {
        publish.publish("delTodo", id); //消息订阅发布
      }
    },
    handlerEdit(todo) {
      // todo.isEdit = true   // 这是在先修改数据todoArr的情况下，可以响应。 假设不提前修改数据，需要动态、的修改数据，则使用下方的方式
      // this.$set(todo,'isEdit',true)  // 更进一步优化，思考，如果已经编辑过了，再次编辑，已经有这个属性了，不需要反复添加
      if (todo.hasOwnProperty("isEdit")) {
        todo.isEdit = true;
      } else {
        console.log("新添加的属性");
        this.$set(todo, "isEdit", true);
      }
      // this.$refs.inputTitle.focus()  这么写，不能够实现点击编辑后，获取焦点，是因为v-show ，在执行完上面的代码时
      //vue还没有来得及渲染页面，会等本行代码执行完毕后才进行渲染,display 隐藏的时候，focus不能成功。所以此路不通
      //此处可以使用vue提供的nextTick 进行，下一轮的意思，vue的设计本意是等函数内所有代码都执行完之后进行渲染，所以出现了上方的情况
      //为了解决这种困扰，vue提供了nextTick函数。
      this.$nextTick(()=>{
        this.$refs.inputTitle.focus()
      }) 
    },
    saveTodo(todo, e) {
      todo.isEdit = false;
      if(!e.target.value.trim()) return alert('不可为空！')
      this.$bus.$emit("updateTodo", todo.id, e.target.value);
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover {
  background-color: #ddd;
}
li:hover button {
  display: block;
}
</style>